<template>
  <div clss="setting-form28">
    <div class="content">
      <Row type='flex'
           justify='space-between'
           align="middle"
           style='padding:20px'>
        <Row type='flex'
             align="middle">
          <Col style="padding-right:20px;">
          <span style="margin-right:10px;">搜索项:</span>
          <Select v-model="shopInfo"
                  clearable
                  placeholder="请选择"
                  @on-change="selectinfo"
                  style="width:180px;margin-right:10px;">
            <Option value="1">供应商编码</Option>
            <Option value="2">供应商名称</Option>
          </Select>
          <Input v-model="shopCall"
                 @on-keyup="filterSpace"
                 style="width: 180px" />
          </Col>
          <Col style="padding-right:20px;display:flex;align-items:center;">
          <span style="margin-right:10px;">礼品分类</span>
          <treeselect v-model="categoryId"
                      :options="options"
                      style="width: 180px"
                      :disable-branch-nodes="true"
                      noResultsText="未搜索符合关键字分类"
                      noOptionsText="礼品类型为空"
                      placeholder="请下拉选择"
                      :normalizer="normalizer"
                      @select="selectList" />
          <!-- <Select v-model="gift"
                  placeholder="请选择"
                  style="width:180px">
            <Option value="0">全部</Option>
            <Option value="1">自采</Option>
            <Option value="2">集采</Option>
          </Select> -->
          </Col>
          <Col>
          <Col>
          <Button type="primary"
                  @click="search"
                  style="width:80px;margin-right:20px;">查询</Button>
          <Button style="width:80px;"
                  @click="replacement">重置</Button>
          </Col>
          </Col>
        </Row>
        <Col><Button type="primary"
                style="width:80px;"
                @click="add">添加</Button></Col>
      </Row>
      <div class="content_list">
        <Table stripe
               :height="this.tableHeight"
               class="table-list"
               :loading="loading"
               :columns="columns"
               :data="datalist"
               id="mygrid">
          <template slot-scope="{ row }"
                    slot="action">
            <i class="iconsys icondetail"
               title="查看详情"
               @click="detailsShow(row.supplierId)">
            </i>
            <i class="iconsys iconedit"
               title="编辑"
               @click="uptShow(row.supplierId)">
            </i>
            <Poptip confirm
                    title="你确定要删除吗？"
                    @on-ok="ok(row.supplierId)"
                    class="poptip_del_gy"
                    @on-cancel="cancel">
              <i class="iconsys icondel"
                 v-if="isDel"
                 title="删除">
              </i>
            </Poptip>
          </template>
        </Table>
      </div>
      <div class="page-box"
           style="margin-top: 20px">
        <Page :total="total"
              ref="pages"
              :current.sync="searchObj.offset"
              :page-size="searchObj.limit"
              @on-change="handlePage"
              @on-page-size-change="handlePageSize"
              show-sizer
              show-total />
      </div>
    </div>
    <Drawer :title="title"
            v-model="value"
            class="supplier-drawer"
            @on-close="closed"
            width="600"
            :mask-closable="false">
      <Form :model="formInline2"
            class="supplier-form supplier-form-detail"
            v-if="isDetail"
            :label-width="120">
        <FormItem label="供应商性质:">
          <span>{{formInline2.supplierNature}}</span>
        </FormItem>
        <FormItem label="供应商名称:">
          <span>{{formInline2.supplierName}}</span>
        </FormItem>
        <FormItem label="联系人:">
          <span>{{formInline2.contact}}</span>
        </FormItem>
        <FormItem label="联系电话：">
          <span>{{formInline2.contactPhone}}</span>
        </FormItem>
        <FormItem label="开户银行：">
          <span>{{formInline2.bank}}</span>
        </FormItem>
        <FormItem label="付款账户名：">
          <span>{{formInline2.accountName}}</span>
        </FormItem>
        <FormItem label="付款账号：">
          <span>{{formInline2.account}}</span>
        </FormItem>
        <FormItem label="传真：">
          <span>{{formInline2.fax}}</span>
        </FormItem>
        <FormItem label="网站：">
          <span>{{formInline2.website}}</span>
        </FormItem>
        <FormItem label="简介：">
          <span>{{formInline2.remark}}</span>
        </FormItem>
        <FormItem label="选择原因：">
          <span>{{formInline2.reason}}</span>
        </FormItem>
        <FormItem label=""
                  style="margin-top:40px;">
          <!-- <Button type="primary"
                  style="width:80px;margin-right:20px;"
                  @click="submitdetail">保存</Button> -->
          <Button style="width:80px;"
                  @click="resetdetail">取消</Button>
        </FormItem>
      </Form>
      <Form :model="formInline"
            ref="formValidate"
            class="supplier-form"
            v-if="!isDetail"
            :rules="ruleInline"
            :label-width="120">
        <FormItem prop="supplierNature"
                  label="供应商性质:"
                  class="ivu-form-item-required">
          <Input class='supplier-input'
                 disabled
                 v-model="formInline.supplierNature"
                 placeholder="店面供应商" />
          <!-- <Select v-model="formInline.supplierNature"
                  placeholder="店面供应商"
                  disabled
                  class='supplier-input'>
            <Option value='0'>店面供应商</Option>
            <Option value='1'>自采</Option>
            <Option value='2'>采集</Option>
          </Select> -->
        </FormItem>
        <FormItem prop="supplierName"
                  label="供应商名称：">
          <Input type="text"
                 class='supplier-input'
                 :maxlength="30"
                 v-model="formInline.supplierName"
                 placeholder="最多可输入30字" />
        </FormItem>
        <FormItem prop="contact"
                  label="联系人：">
          <Input type="text"
                 class='supplier-input'
                 :maxlength="30"
                 v-model="formInline.contact"
                 placeholder="最多可输入30字" />
        </FormItem>
        <FormItem prop="contactPhone"
                  label="联系电话：">
          <Input type="text"
                 class='supplier-input'
                 @on-keyup="filterTel"
                 @on-blur="filtertelephone"
                 :maxlength="30"
                 v-model="formInline.contactPhone"
                 placeholder="最多可输入30字" />
        </FormItem>
        <FormItem :prop="bank"
                  label="开户银行：">
          <Select v-model="formInline.bank"
                  class='supplier-input'
                  v-if="!single">
            <Option value="中国银行">中国银行</Option>
            <Option value="中国工商银行">中国工商银行</Option>
            <Option value="中国农业银行">中国农业银行</Option>
            <Option value="中国建设银行">中国建设银行</Option>
            <Option value="交通银行">交通银行</Option>
            <Option value="招商银行">招商银行</Option>
          </Select>
          <Input type="text"
                 class='supplier-input'
                 v-model="formInline.bankname"
                 v-if="single"
                 :maxlength="30"
                 placeholder="最多可输入30字" />
          <Checkbox v-model="single"
                    style="margin-left:20px;">自定义</Checkbox>
        </FormItem>
        <FormItem prop="accountName"
                  label="付款账号名：">
          <Input type="text"
                 class='supplier-input'
                 :maxlength="30"
                 v-model="formInline.accountName"
                 placeholder="最多可输入30字" />
        </FormItem>
        <FormItem prop="account"
                  label="付款账号：">
          <Input type="text"
                 class='supplier-input'
                 @on-keyup="keyupaccount"
                 @on-blur="bluraccount"
                 :maxlength="30"
                 v-model="formInline.account"
                 placeholder="最多可输入30字" />
        </FormItem>
        <FormItem prop="giftCategory"
                  label="礼品分类：">
          <treeselect v-model="formInline.giftCategory"
                      :options="options"
                      style="width: 180px"
                      :disable-branch-nodes="true"
                      noResultsText="未搜索符合关键字分类"
                      noOptionsText="礼品类型为空"
                      placeholder="请下拉选择"
                      :normalizer="normalizer"
                      @select="selectList" />
        </FormItem>
        <FormItem prop="fax"
                  label="传真：">
          <Input type="text"
                 class='supplier-input'
                 @on-keyup="keyupfax"
                 @on-blur="blurfax"
                 :maxlength="30"
                 v-model="formInline.fax"
                 placeholder="最多可输入30字" />
        </FormItem>
        <FormItem prop="website"
                  label="网站：">
          <Input type="text"
                 class='supplier-input'
                 :maxlength="60"
                 v-model="formInline.website"
                 placeholder="最多可输入60字" />
        </FormItem>
        <FormItem prop="remark"
                  label="简介：">
          <Input class='supplier-input'
                 type="textarea"
                 :rows="3"
                 :maxlength="300"
                 v-model="formInline.remark"
                 placeholder="最多可输入300字" />
          <span class="supplier-info">{{formInline.remark?formInline.remark.length:0}}/300</span>
        </FormItem>
        <FormItem prop="reason"
                  label="选择原因：">
          <Input class='supplier-input'
                 type="textarea"
                 :rows="3"
                 :maxlength="300"
                 v-model="formInline.reason"
                 placeholder="最多可输入300字" />
          <span class="supplier-info">{{formInline.reason?formInline.reason.length:0}}/300</span>
        </FormItem>
        <FormItem label="">
          <Button type="primary"
                  style="width:80px;margin-right:20px;"
                  @click="submit">保存</Button>
          <Button style="width:80px;"
                  @click="reset">取消</Button>
        </FormItem>
      </Form>
    </Drawer>
  </div>
</template>
<script>
import { supplierList, getProductCategory, deleteSupplierList, getSupplierList, addSupplierList } from '@/api/setting'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { Treeselect },
  data () {
    return {
      shopCall: null,
      tableHeight: 0,
      value: false,
      shopInfo: null,
      gift: null,
      single: false,
      options: [],
      isDetail: false,
      title: '新增供应商',
      categoryId: null,
      supplierId: null,
      loading: false,
      normalizer (node) {
        return {
          id: node.categoryId,
          label: node.categoryName,
          children: node.childs && node.childs.length ? node.childs : undefined
        }
      },
      // loading: true,
      columns: [
        { title: '供应商编码', key: 'supplierCode', width: 200, align: 'center' },
        { title: '供应商名称', key: 'supplierName', width: 200, align: 'center' },
        { title: '联系人信息', key: 'contact', align: 'center' },
        { title: '联系电话', key: 'contactPhone', align: 'center' },
        { title: '礼品分类', key: 'categoryName', align: 'center' },
        { title: '创建日期', key: 'createTime', width: 200, align: 'center' },
        { title: '操作', slot: 'action', width: 200, align: 'center' }
      ],
      datalist: [],
      total: 0,
      searchObj: {
        offset: 1,
        limit: 10,
        status: 1,
        merchantId: this.$store.state.user.merchantId,
        shopId: this.$route.query.id,
        giftCategory: this.categoryId
      },
      isDel: false,
      ruleInline: {
        // supplierNature: [
        //   { required: true, message: '请输入供应商性质', trigger: 'blur' }
        // ],
        supplierName: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        bank: [
          { required: true, message: '请选择开户银行', trigger: 'change' }
        ],
        bankname: [
          { required: true, message: '请输入开户银行', trigger: 'blur' }
        ],
        accountName: [
          { required: true, message: '请输入付款账户名', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输入付款账号', trigger: 'blur' }
        ]
      },
      giftParmas: {
        shopId: this.$route.query.id,
        'merchantId': this.$store.state.user.merchantId,
        categoryType: 1,
        parentId: 0
      },
      formInline2: {
        supplierNature: '',
        supplierName: null,
        contact: null,
        contactPhone: null,
        bank: null,
        bankname: null,
        giftCategory: null,
        accountName: null,
        account: null,
        fax: null,
        website: null,
        remark: null,
        reason: null
      },
      formInline: {
        supplierNature: '',
        supplierName: null,
        contact: null,
        contactPhone: null,
        bank: '',
        bankname: null,
        giftCategory: null,
        accountName: null,
        account: null,
        fax: null,
        website: null,
        remark: null,
        reason: null
      }
    }
  },
  computed: {
    bank () {
      if (this.single) return 'bankname'
      return 'bank'
    }
  },
  watch: {
    shopInfo (val) {
      this.shopCall = null
    }
  },
  mounted () {
    this.getGiftList()
  },
  methods: {
    detailsShow (id) {
      this.title = '查看供应商'
      // this.$refs.formValidate.resetFields()
      this.formInline2.supplierNature = '店面供应商'
      // setTimeout(() => {
      this.isDetail = true
      this.value = true
      // }, 200)
      this.getSupplierListOne(id)
    },
    // 重置
    replacement () {
      this.shopCall = null
      this.shopInfo = null
      this.categoryId = null
      this.searchObj.offset = 1
      this.searchObj.limit = 10
      this.getList(this.shopInfo)
    },
    closed () {
      if (this.title !== '查看供应商') this.$refs.formValidate.resetFields()
    },
    selectList (node) {
    },
    // 获取礼品商品类型
    getGiftList () {
      getProductCategory(this.giftParmas).then(res => {
        if (res.data.status === 200) {
          res.data.data.map((ele) => {
            if (ele.parentId === '0' && ele.childs.length === 0) {
              this.$set(ele, 'isDisabled', true)
            }
          })
          this.options = res.data.data
          this.getList()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    selectinfo (val) {
    },
    uptShow (id) {
      this.title = '编辑供应商'
      this.formInline.supplierNature = '店面供应商'
      this.isDetail = false
      this.value = true
      this.getSupplierListOne(id)
    },
    // 添加
    add () {
      this.title = '新增供应商'
      this.single = false
      // this.$refs.formValidate.resetFields()
      this.formInline.bank = ''
      this.formInline.supplierNature = '店面供应商'
      // setTimeout(() => {
      this.isDetail = false
      this.value = true
      // }, 200)
    },
    keyupfax () {
      this.formInline.fax = this.formInline.fax.replace(/\s/g, '')
      this.formInline.fax = this.formInline.fax.replace(/[^0-9-]+/, '')
    },
    blurfax () {
      this.formInline.fax = this.formInline.fax.replace(/\s/g, '')
      this.formInline.fax = this.formInline.fax.replace(/[^0-9-]+/, '')
    },
    filterTel () {
      this.formInline.contactPhone = this.formInline.contactPhone.replace(/\s/g, '')
      this.formInline.contactPhone = this.formInline.contactPhone.replace(/[^0-9-]+/, '')
    },
    keyupaccount () {
      this.formInline.account = this.formInline.account.replace(/\s/g, '')
      this.formInline.account = this.formInline.account.replace(/[^0-9]+/, '')
    },
    bluraccount () {
      this.formInline.account = this.formInline.account.replace(/\s/g, '')
      this.formInline.account = this.formInline.account.replace(/[^0-9]+/, '')
    },
    filtertelephone () {
      this.formInline.contactPhone = this.formInline.contactPhone.replace(/\s/g, '')
      this.formInline.contactPhone = this.formInline.contactPhone.replace(/[^0-9-]+/, '')
    },
    // 新增保存
    submit () {
      let datsParmas = {
        merchantId: this.$store.state.user.merchantId,
        shopId: this.$route.query.id,
        supplierName: this.formInline.supplierName,
        contact: this.formInline.contact,
        contactPhone: this.formInline.contactPhone,
        accountName: this.formInline.accountName,
        giftCategory: this.formInline.giftCategory,
        account: this.formInline.account,
        fax: this.formInline.fax,
        website: this.formInline.website,
        remark: this.formInline.remark,
        reason: this.formInline.reason,
        supplierType: 1,
        supplierId: null
      }
      if (this.single) {
        datsParmas = { ...datsParmas, bank: this.formInline.bankname }
      } else {
        datsParmas = { ...datsParmas, bank: this.formInline.bank }
      }
      this.$refs.formValidate.validate((val) => {
        if (val) {
          if (this.title === '新增供应商') {
            addSupplierList(
              { ...datsParmas }
            ).then(res => {
              if (res.data.status === 200) {
                this.$Message.success('新增成功')
                this.$refs.formValidate.resetFields()
                this.value = false
                this.getList()
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            })
          } else {
            addSupplierList(
              { ...datsParmas, supplierId: this.supplierId }
            ).then(res => {
              if (res.data.status === 200) {
                this.$Message.success('编辑成功')
                this.$refs.formValidate.resetFields()
                this.value = false
                this.getList()
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            })
          }
        }
      })
    },
    reset () {
      this.$refs.formValidate.resetFields()
      this.value = false
    },
    cancel () {

    },
    search () {
      this.searchObj.offset = 1
      this.searchObj.limit = 10
      this.getList(this.shopInfo)
    },
    // 去除空格
    filterSpace () {
      this.shopCall = this.shopCall ? this.shopCall.replace(/\s+/g, '') : null
    },
    getSupplierListOne (id) {
      this.supplierId = id
      getSupplierList({
        supplierId: id
      }).then(res => {
        if (res.data.status === 200) {
          if (this.title === '查看供应商') {
            this.formInline2 = res.data.data
            this.formInline2.supplierNature = '店面供应商'
          } else {
            this.formInline = res.data.data
            let arr = ['中国银行', '中国工商银行', '中国农业银行', '中国建设银行', '交通银行', '招商银行']
            this.single = false
            if (!arr.includes(this.formInline.bank)) {
              this.single = true
              this.formInline.bankname = this.formInline.bank
              this.formInline.bank = null
            }
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    submitdetail () {
      this.value = false
    },
    resetdetail () {
      this.value = false
    },
    getList (type) {
      this.loading = true
      if (type === '2') {
        supplierList({
          ...this.searchObj,
          supplierName: this.shopCall,
          giftCategory: this.categoryId,
          offset: (this.searchObj.offset - 1) * this.searchObj.limit,
          limit: this.searchObj.limit
        }).then(res => {
          if (res.data.status === 200) {
            this.loading = false
            this.datalist = res.data.data
            this.total = res.data.totalCount
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      } else if (type === '1') {
        supplierList({
          ...this.searchObj,
          supplierCode: this.shopCall,
          giftCategory: this.categoryId,
          offset: (this.searchObj.offset - 1) * this.searchObj.limit,
          limit: this.searchObj.limit
        }).then(res => {
          if (res.data.status === 200) {
            this.loading = false
            this.datalist = res.data.data
            this.total = res.data.totalCount
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      } else {
        supplierList({
          ...this.searchObj,
          giftCategory: this.categoryId,
          offset: (this.searchObj.offset - 1) * this.searchObj.limit,
          limit: this.searchObj.limit
        }).then(res => {
          if (res.data.status === 200) {
            this.loading = false
            this.datalist = res.data.data
            this.total = res.data.totalCount
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      }
    },
    ok (id) {
      if (this.searchObj.offset !== 1) {
        if (this.total % this.searchObj.limit === 1) {
          this.searchObj.offset = this.searchObj.offset - 1
        }
      }
      deleteSupplierList({
        supplierId: id
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('删除成功')
          this.getList()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 选择每页条数
    handlePageSize (num) {
      this.searchObj.limit = num
      this.getList(this.shopInfo)
    },
    // 选择页码
    handlePage (pageIndex) {
      this.searchObj.offset = pageIndex
      this.getList(this.shopInfo)
    }
  }
}
</script>
<style lang="less">
.supplier-drawer {
  .supplier-form {
    width: 484px;
    margin: auto;
    .supplier-info {
      display: block;
      text-align: right;
      padding-right: 86px;
    }
  }
  .supplier-form-detail {
    .ivu-form-item {
      margin-bottom: 10px;
    }
    .ivu-form-item-required .ivu-form-item-label:before {
      display: none !important;
    }
  }
  .supplier-input {
    width: 280px;
  }
}
</style>
<style>
.poptip_del_gy .ivu-poptip-body .ivu-icon {
  left: 15px !important;
}
.poptip_del_gy .ivu-poptip-body-message {
  width: 122px !important;
}
</style>
